<style>
.bodyclick{
    width:100%;
    height:100%;
}
.cancelBubble{
    width:250px;
    height:340px;
}
</style>
<template>
	<div @click="bodyclick" class="a">
        <div @click.stop="cancelBubble" class="cancelBubble">
            <sketch-picker v-show="sketchbox" @change-color="onChange" v-model="colors"></sketch-picker>
            <input type="text" v-model="colors">
        </div>
        <div contenteditable=true>在在在大厦大厦大厦大厦大厦大厦大厦大厦大厦大厦大厦大厦大厦</div>
	</div>
</template>
<script>
    import { mapActions } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    import { Sketch } from 'vue-color'
    export default {
        data() {
			return {
                sketchbox:true,
				colors:"#fff",
                tempcolors:""
			}
		},
		methods: {
            ...mapActions([USER_SIGNIN]),
            queding(){
               this.sketchbox=false;
               this.colors=this.tempcolors
            },
            onChange (val) {
                this.colors = val.hex;
                this.tempcolors = val.hex;
                return false;
            },
            bodyclick(){
                this.sketchbox=false;
            },
            cancelBubble(){
                console.log(2)
            }
		},
        components: {
            'sketch-picker': Sketch
        },
    }
</script>